<template>
	<view class="pages">
		<fixedheader :hideHeight="true" :isBack="false">
			<block slot="haed" @click="tourl('/pages/home/choseAdress')">
				<view class="location">
					<image src="/static/home/icon_address.svg" mode="widthFix"></image>
					<text>{{city.city}}</text>
					<u-icon slot="right" name="arrow-right" size="12"></u-icon>
				</view>
			</block>
		</fixedheader>
		<view class="view_swiper">
			<swiper class="swiper" :autoplay="true" :interval="3000" :indicator-dots="true"
				indicator-active-color="#277EEF">
				<swiper-item v-for="(item,index) in bannerList" :key="item.id">
					<image :src="item.url" style="width: 100%;" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="view_nav">
			<div class="vNav" v-for="(v,i) in tabArr" :key="i" @click="toRoute(i)">
				<image :src="v.image" mode=""></image>
				<span>{{v.title}}</span>
			</div>

		</view>

		<div class="view_card">
			<div class="card_head">
				<div class="ch_title">
					<image src="../../static/home/heat.png" mode=""></image>
					<span>热门产品</span>
				</div>
				<div class="ch_more">
					<span>查看更多</span>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</div>
			</div>

			<home-list ref="home"></home-list>
		</div>
		<!-- <wu-title></wu-title> -->

		<!-- <home-list ref="home"></home-list> -->
		<!-- <wuMode ref="callphone"></wuMode> -->
		<woodsShareToast ref="woodsShareToast" @visible="tovisible" />
		<woodsSignin ref="woodsSignin" @visible="tovisible" />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	import {
		homestaffAPI
	} from "@/api/home.js"
	import {
		bannerListAPI
	} from "@/api/home.js"
	import wuTitle from "@/components/wu-title.vue"
	import homeList from "@/components/home-list.vue"
	import woodsShareToast from "@/components/woods-share-toast.vue"
	import woodsSignin from "@/components/woods-signin.vue"
	export default {
		components: {
			wuTitle,
			homeList,
			woodsShareToast,
			woodsSignin
		},
		data() {
			return {
				tabArr: [{
					image: '../../static/home/qiandao.png',
					title: '每日签到',
				}, {
					image: '../../static/home/quan.png',
					title: '领券中心',
				}, {
					image: '../../static/home/jifen.png',
					title: '积分商城',
				}, {
					image: '../../static/home/tiaozao.png',
					title: '跳蚤市场',
				}, ],
				isRefresh: true,
				page: 1,
				list: [{

				}],
				bannerList: [{

				}],
				toplist: [],
				topSign: 1,
				rate: 3.6
			}
		},
		onReachBottom() {
			// if(this.isRefresh){
			// 	uni.showToast({
			// 		 title: "加载中",
			// 		 duration:400,
			// 		icon:"loading"
			// 	});
			// 	 this.page+=1  
			// 	this.getlist()		

			// }
		},
		async created() {
			this.getBannerList()
			// if(uni.getStorageSync("token")){
			await this.fetchlocation()
			await this.getlist()

			// }else{
			// 	uni.reLaunch({
			// 		url:'/pages/login/login'
			// 	})
			// }


		},
		computed: {
			...mapState("select", ["location", "city"])
		},
		methods: {
			...mapActions("select", ['fetchlocation']),

			toRoute(i) {
				switch (i) {
					case 0:
						this.$refs.woodsSignin.isShow = true;
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/home/coupon'
						});
						break;
					case 2:
						uni.showModal({
							title: "暂未开通",
							content: "积分商城火热筹备中，敬请期待！",
							showCancel: false,
							confirmText: "我已了解"
						})
						break;
					case 3:
						uni.showModal({
							title: "暂未开通",
							content: "跳蚤市场筹备中，敬请期待！",
							showCancel: false,
							confirmText: "我已了解"
						})
						break;
				}
			},

			tovisible(visible) {
				if (!visible) uni.showTabBar()

			},
			getBannerList() {
				bannerListAPI().then(res => {
					console.log("1111", res)
					this.bannerList = res.data
				})
			},
			getlist() {
				var data = {
					cityId: this.city.cityId,
					latitude: this.location.latitude,
					longitude: this.location.longitude,
					userId: uni.getStorageSync('userId')
				}
				homestaffAPI(data).then(res => {

					this.list = res
					this.$refs.home.list = res
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		// background-color: #F8F8F8;
		background-color: #f1f1f1;
		min-height: 100vh;

		.view_swiper {
			.swiper {
				height: 580rpx;
			}

			width: 100%;

			image {
				width: 100%;
			}
		}

		.location {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			height: 100%;

			image {
				width: 42rpx;
				height: 42rpx;
			}

			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #111111;
			}
		}

		.view_nav {
			position: relative;
			left: 0;
			top: -20rpx;
			// background: linear-gradient(180deg, #5497F1 0%, #FFFFFF 100%);
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 40rpx 50rpx 60rpx;
			display: flex;
			justify-content: space-between;

			.vNav {
				// width: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 140rpx;
					height: 140rpx;
				}

				span {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 33rpx;
				}

			}

		}

		.view_card {
			position: relative;
			left: 0;
			top: -40rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 10rpx 24rpx;
			background-color: #f1f1f1;

			.card_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0rpx;

				.ch_title {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					span {
						margin-left: 10rpx;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 42rpx;
					}
				}

				.ch_more {
					display: flex;
					align-items: center;

					span {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
					}
				}
			}
		}

	}
</style>